<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '添加入住人',
  },
}
</route>
<template>
  <div class="form-page">
    <wd-form custom-class="custom-form" ref="form" :model="model">
      <wd-cell title="真实姓名">
        <wd-input
          prop="name"
          clearable
          v-model="model.name"
          placeholder="请保持与证件姓名一致"
          :rules="[{ required: true, message: '请输入真实姓名' }]"
        />
      </wd-cell>

      <wd-cell title="身份证号">
        <wd-input
          prop="idCardNo"
          clearable
          v-model="model.idCardNo"
          placeholder="请保持与证件一致"
          :rules="[
            { required: true, message: '请输入身份证号' },
            {
              required: false,
              pattern:
                /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
              message: '请输入正确的身份证号',
            },
          ]"
        />
      </wd-cell>

      <wd-cell title="手机号码">
        <wd-input
          prop="phone"
          clearable
          v-model="model.phone"
          placeholder="请输入手机号码"
          :rules="[
            { required: true, message: '请输入手机号码' },
            { required: false, pattern: /\d{11}/, message: '手机号码为11位数字' },
          ]"
        />
      </wd-cell>
      <wd-cell title="邮箱">
        <wd-input
          clearable
          v-model="model.remark"
          placeholder="请输入邮箱 (选填)"
          :rules="[{ required: false, message: '请输入邮箱地址' }]"
        />
      </wd-cell>
    </wd-form>

    <wd-form custom-class="custom-form" :model="model">
      <wd-cell title="设为本人">
        <div class="pt-12rpx">
          <wd-switch v-model="model.isOwner" active-color="#1F2026" size="38rpx" />
        </div>
      </wd-cell>
    </wd-form>

    <div class="btn-box">
      <button class="submit active" @click="handleSubmit()" :loading="loading">保存</button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { msgSuccess } from '@/utils/index'
import { back } from '@/utils/page'

const model = reactive({
  name: '',
  idCardNo: '',
  phone: '',
  remark: '',
  isOwner: false,
})

onLoad((query) => {
  if (query.id) {
    uni.showLoading()
    http
      .get('/personnel-list-app/detail', {
        id: query.id,
      })
      .then((res) => {
        Object.assign(model, res)
        console.log(res)
      })
      .finally(() => {
        uni.hideLoading()
      })
  }
})

const form = ref()
const loading = ref(false)
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        loading.value = true
        uni.showLoading()
        http
          .post(`/personnel-list-app/${model.id ? 'update' : 'save'}`, model)
          .then(() => {
            msgSuccess('提交成功').then(() => {
              back()
            })
          })
          .finally(() => {
            loading.value = false
            uni.hideLoading()
          })
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>
<style lang="scss" scoped>
.form-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 28rpx 30rpx;
  padding-bottom: 152rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 152rpx) !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 152rpx) !important;
  background-color: var(--bgc4);

  .btn-box {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20rpx 30rpx;
    padding-bottom: 20rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx) !important;
    background-color: #fff;
    box-shadow: 0px 17rpx 28rpx rgba(31, 32, 38, 0.3);
    .submit {
      box-sizing: border-box;
      width: 100%;
      height: 92rpx;
      font-size: 30rpx;
      font-weight: 600;
      line-height: 88rpx;
      color: #fff;
      text-align: center;
      background-color: var(--color1);
      border-radius: 46rpx;
      box-shadow: 0px 17rpx 28rpx rgba(31, 32, 38, 0.3);
    }
  }
}
</style>
